import React, { useState, useRef, useEffect } from 'react';
import { Modal, Card, Tabs } from 'antd';
import { goodsType_status } from '@/common/contact'
import Table from './components/Table'
const RenderShopCard = (props) => {
  const { data = [] } = props
  const [tabList, setTabList] = useState([])
  const [activeTabKey, setActiveTabKey] = useState('');
  useEffect(() => {
    if (data.length > 0) {
      let tablistInfo = []
      data.forEach(item => {
        const { packageGoodsType, packageGoodsInfo = '[]', chooseAmount, chooseType
        } = item
        let packageList = JSON.parse(packageGoodsInfo)
        tablistInfo.push({
          key: packageGoodsType,
          label: goodsType_status[packageGoodsType],
          children: <Table list={packageList}></Table>
        })
      })
      setTabList(tablistInfo)
      setActiveTabKey(data[0].packageGoodsType)
    }
  }, [data])
  return <Tabs
    tabPosition={'left'}
    items={tabList}
    activeKey={activeTabKey}
    onChange={(key) => {
      setActiveTabKey(key);
    }}
  >
  </Tabs>
}
export default RenderShopCard